
// todo 多端的样式调整...

body {
  margin: 0px;
  padding: 0;
}

/*
主页面右侧所有的容器的样式
原本是写在router-view下的(就很蠢...),现在分散到所有的页面下
 */
.app-container {
  /*该高度是基于上层容器的,因此*/
  height: 100%;
  /* 最小高度暂定400px */
  min-height: 400px;
  overflow-y: auto;
  padding: 15px 15px 5px 15px;
  position: relative;
  box-sizing: border-box;

  ::-webkit-scrollbar {
    width: 0px;
    height: 0px;
  }

  ::-webkit-scrollbar { /*滚动条整体样式*/
    width: 4px;
    height: 10px;
  }

  ::-webkit-scrollbar-thumb { /*滚动条里面小方块*/
    border-radius: 4px;
    -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    background: #C0C4CC;
  }

  ::-webkit-scrollbar-track { /*滚动条里面轨道*/
    -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    border-radius: 4px;
    background: #EDEDED;
  }

}


/*树的边框*/
.tree_container {
  border: 1px solid #C0C4CC;
  height: 400px;
  overflow: auto;
  /* 这里是因为element中的el-form-item__content 设置的line-height为40,与el-tree的高度26px不一致,导致出现滚动条的问题(行内块元素的height与line-height应该一致) */
  line-height: 26px;
  border-radius: 4px;
}

/*
解决el-row会出现错位的问题
*/
.el-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
}


/* 详情描述的label样式 el-descriptions组件实际渲染成为了table,它的table的宽度设置为100% 因此如果想设置它的label宽度,那么需要不设置content宽度,只设置label宽度(防止宽度不够导致的等比例扩宽) */

.descLabel {
  width: 140px;
  white-space: break-spaces;
}

/*详情描述的content样式,回车换行*/
.descContent {
  /*如果在el-descriptions-item>中回车,也会被识别,因此给去掉了...*/
  /*white-space: break-spaces;*/

}


.el-dialog {
  /*
  dialog下方的外边距设置为0
  这里是考虑到系统中显示dialog时,最上方图层必然仅有一个dialog,额外的外边距会导致实际高度过大而出现一些本不该出现的滚动条...
   */
  margin-bottom: 0px;
  /*dialog弹窗提高*/
  /*margin-top: 10vh*/
}

.drawer-container{
    display: flex;
    flex-direction: column;
    .drawer-content{
        flex: 1
    }
    .drawer-footer{

    }
}
